// 入口函数
$(function(){
// 需求1:初始化文章分类列表:
initArtCateList();

function initArtCateList(){
    axios({
        method:"GET",
        url:"/my/article/cates"
    }).then(({data:res})=>{
        // console.log(res);
       if (res.status!==0) {
           return layui.layer.msg(res.message);
       }
    //    console.log(res);
       let arr=[]
           res.data.forEach(function(element){
               if (element.Id<0) {
                   return
               }
               arr.push(`
               <tr>
               <td>${element.Id}</td>
               <td>${element.name}</td>
               <td>${element.alias}</td>
               <td>
                   <button data-id="${element.Id}" class="btn-edit layui-btn   layui-btn-xs">编辑</button>
                   <button data-id="${element.Id}" class="del-edit layui-btn  layui-btn-xs layui-btn-danger">删除</button>
                 </td>
             </tr>
               `);
           });
           $("tbody").empty().html(arr.join(""))
      
    })
}

// 需求2:点击按钮.弹出添加类别对话框
let indexAdd=0;
$("#addBtn").on("click",function(){
    indexAdd=layer.open({
        type:1,
        title:"添加文章类别",
        area:["500px","260px"],
        content:` <form id="addForm" class="layui-form" action="">
        <!-- 分类名称 -->
        
        <div class="layui-form-item">
          <label class="layui-form-label">分类名称</label>
          <div class="layui-input-block">
            <input type="text" name="name" required  lay-verify="required" placeholder="请输入分类名称" autocomplete="off" class="layui-input">
          </div>
        </div>
    
    
        <div class="layui-form-item">
          <label class="layui-form-label">分类别名</label>
          <div class="layui-input-block">
            <input type="text" name="alias" required  lay-verify="required" placeholder="请输入分类别名" autocomplete="off" class="layui-input">
          </div>
        </div>
    
    
        <div class="layui-form-item">
          <div class="layui-input-block">
           <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
          </div>
        </div>
    </form>`
    })
})


// 需求三:添加文章分类 后添加动态元素
$("body").on("submit","#addForm",function(e){
    e.preventDefault();
    // 发送ajax
    axios({
        method:"POST",
        url:"/my/article/addcates",
        data:$(this).serialize()    
    }).then(({data:res})=>{
       if (res.status!==0) {
           return layer.msg(res.message);
       }
       layer.msg("恭喜你,添加文章类别成功!")
       initArtCateList();
       layer.close(indexAdd);
    })
})

// 需求四:修改分类弹出层
let indexEdit=0;
$("tbody").on("click",".btn-edit",function(){
    indexEdit=layer.open({
        type:1,
        title:"修改文章类别",
        area:["500px","260px"],
        content:` <form id="editForm" class="layui-form" lay-filter="editForm">
        <!-- 分类名称 -->
        <input type="hidden" name="Id">

        <div class="layui-form-item">
          <label class="layui-form-label">分类名称</label>
          <div class="layui-input-block">
            <input type="text" name="name" required  lay-verify="required" placeholder="请输入分类名称" autocomplete="off" class="layui-input">
          </div>
        </div>
    
    
        <div class="layui-form-item">
          <label class="layui-form-label">分类别名</label>
          <div class="layui-input-block">
            <input type="text" name="alias" required  lay-verify="required" placeholder="请输入分类别名" autocomplete="off" class="layui-input">
          </div>
        </div>
    
    
        <div class="layui-form-item">
          <div class="layui-input-block">
           <button class="layui-btn" lay-submit lay-filter="formDemo">确认修改</button>
        
          </div>
        </div>
    </form>`
    })
    let id=$(this).attr("data-id")
//    发送ajax 获取数据 渲染到页面
axios({
    method:"get",
    url:"/my/article/cates/"+id

}).then(({data:res})=>{
    if (res.status!=0) {
        return layer.msg(res.message)
    }
    layui.form.val("editForm",res.data)
})
});
// 需求⑤修改文章分类 


$("body").on("submit","#editForm",function(e){
    e.preventDefault();
    // 发送ajax
    axios({
        method:"POST",
        url:"/my/article/updatecate",
        data:$(this).serialize()    
    }).then(({data:res})=>{
       if (res.status!==0) {
           return layer.msg(res.message);
       }
       layer.msg("恭喜你,修改文章类别成功!")
       initArtCateList();
       layer.close(indexEdit);
    })
})

// 需求6:删除

$("tbody").on("click",".del-edit",function(){
    let id=$(this).attr("data-id")
    layer.confirm("确认删除吗?",{icon:3,title:"提示"},function(index){
        axios({
            method:"GET",
            url:"/my/article/deletecate/"+id,
           
        }).then(({data:res})=>{
            if (res.status!=0) {
                return alert(`${res.message}`)
            }
           layer.msg("恭喜你,删除文章类别成功!")
            initArtCateList();
        });
        layer.close(index)
    })
   
});



// 页面时时刷新
setInterval(() => {
    initArtCateList();
}, 1000);

})